<template>
	<view>
		<view class="module-block" v-if="orderInfo.eticketno && (orderInfo.status == 2 || orderInfo.status == 5)">
			<view class="expense-code-wrap">
				<view class="code-title-bar" :class="{'over': orderInfo.isconsume == 1}">
					<view class="title">消费码</view>						
				</view>
				<view class="code-group">
					<view class="success-code">
						<image :style="orderInfo.status == 5?'opacity: 0.2;':''" :src="`${orderInfo.web_url}/res/vendor/qrcode/make2.php?param=${orderInfo.eticketno}`" mode="aspectFill"></image>
						<view v-if="orderInfo.status == 5" class="sign-icon2"></view>
					</view>
					<view class="text">{{orderInfo.eticketno}}</view>
					<view class="name">
						<block v-if="orderInfo.suit_name">{{orderInfo.suit_name}}</block>
						<block v-else>{{orderInfo.productname}}</block>
					</view>						
					<text class="text" style="color:red" v-if="orderInfo.verify_supplier">核销时间：{{orderInfo.finishtime}}	</text>
					<text class="text" style="color:red" v-if="orderInfo.verify_supplier">{{orderInfo.verify_supplier}}/{{orderInfo.verify_supplier_member}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 订单详情消费码
	 * 
	 */
	export default {
		name: 'stExpenseCode',
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			orderInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			scenepay: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		watch: {
			orderInfo: {
				handler(val) {
					// 计算总数
					let info = this.orderInfo,
					totalNum = 0;
					if(info.dingnum){
						totalNum += info.dingnum*1
					}
					if(info.childnum){
						totalNum += info.childnum*1
					}
					if(info.oldnum){
						totalNum += info.oldnum*1
					}
					if(info.people4_num){
						totalNum += info.people4_num*1
					}
					if(info.people5_num){
						totalNum += info.people5_num*1
					}
					if(info.people6_num){
						totalNum += info.people6_num*1
					}
					
					this.totalNum = totalNum
				},
				immediate: true
			},
		},
		data() {
			return {
				stccsStatus: ['', '未支付', '已支付', '等待退款', '退款完成', '已取消', '已使用'],
				totalNum:0, // 总人数
			};
		},
		methods:{
			formatDate(datastr){
				let d =datastr.split("-");
				return d[0]+'年'+d[1]+'月'+d[2]+'日'
			}
		}
	}
</script>

<style lang="scss">
	.module-block {
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}
	.expense-code-wrap{
		@extend .alignItems;
		border-radius: 20rpx;
		background-color: #f1f1f1;
		border: 2px solid #fff;
		.code-title-bar{
			width: 80rpx;
			height: 512rpx;
			border-radius: 10rpx 0 0 10rpx;
			background: linear-gradient(171deg, #2196F3 0%, #37a8ff 100%);
			@extend .directionColumn;
			justify-content: center;
			&.over{
				background: #333;
			}
			.title{
				padding: 20rpx 26rpx 0;
				text-align: center;
				font-size: $uni-font-size-base;
				font-weight: bold;
				color: $uni-text-color-inverse;
				line-height: 1.36;
			}
			.tags{
				padding: 4rpx 0;
				width: 36rpx;
				line-height: 1.42;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-inverse;
				text-align: center;
				border-radius: 4rpx;
				border: 1px solid #fff;
				margin: 28rpx auto 0;
			}
		}
		.code-group{
			flex: 1;
			height: 512rpx;
			padding: 0 20rpx 40rpx;
			font-size: $uni-font-size-base;
			border-bottom: 1px solid $uni-border-color;
			@extend .directionColumn;
			justify-content: center;
			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
		}
		
		.success-code {
			position: relative;
			width: 364rpx;
			height: 364rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.sign-icon {
			position: absolute;
			top: 20rpx;
			right: -47rpx;
			width: 141rpx;
			height: 124rpx;
			background: url("https://static.member.stourweb.cn/uniapp/static/images/expense-icon.png") no-repeat;
			background-size: contain;
		}
		
		.sign-icon2 {
			position: absolute;
			top: 20rpx;
			right: 0rpx;
			width: 350rpx;
			height: 350rpx;
			background: url("http://tt.cdaaaa.com/uploads/ysy.png") no-repeat;
			background-size: contain;
		}
		

		.text {
			margin-top: 16rpx;
			text-align: center;
			color: #3d3d3d;
			font-size: $uni-font-size-base;
			line-height: 1.43;
		}

		.number {
			font-family: "Arial";
			color: $uni-text-color-grey;
		}

		.num {
			margin-top: 16rpx;
			text-align: center;
			color: #3d3d3d;
			font-size: $uni-font-size-base;
			line-height: 1.43;
		}
		.name{
			width: 364rpx;
			text-align: center;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
			line-height: 1.43;
			text-align: center;
			margin: 0 auto;
			@extend .ellipse
		}
	}
</style>
